<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <title>小狗在家</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
    #cover{position:fixed;width:100%;height:100%;top:0;left:0;right:0;background: rgba(0,0,0,.5);z-index:999;display: none;}
    #choose_pet{width:86%;position:fixed;z-index: 1000;left:7%;top:30%;background: #fff;border-radius:10px;display: none;}
    #choose_pet:before{content:'请选择你家小主类型哟~';display: block;text-align: center;margin-top:15px;font-style: 14px;color:#000000;font-weight: 600;}
    .pet{text-align:center;width:50%;float:left;margin:20px 0;}
    .pet h2{font-size:16px;color:#000;font-weight:800;line-height:33px;}
    .pet.focus h2::after{content:'';display:inline-block;vertical-align:middle;width:35px;height:33px;margin-left:10px;background:url('./img/page2_button_choose.png') no-repeat center;background-size:100%;}
</style>
</head>

<body>

    <div id="preload">
        <div class="ball-clip-rotate-pulse">
            <div></div>
            <div></div>
        </div>
    </div>

    <img style="display:block;width: 90%;margin:10px auto 0;" src="img/page1_title.png">
    <img style="display:block;width: 88%;margin:10px auto 0;" src="img/app_words.png">
    <img style="display:block;width: 94%;margin:20px auto 0;" src="img/page1_zhujue.png">

    <div id="cover"></div>
    <ul id="choose_pet" class="clearfix">
        <li pet="cat" class="pet">
            <img style="width:76%;margin-top:23px;" src="img/page2_cat.png">
            <h2>猫主子</h2>
        </li>
        <li pet="dog" class="pet">
            <img style="width:71.2%;" src="img/page2_dog.png">
            <h2>狗主子</h2>
        </li>
    </ul>

    <img id="join" style="display:block;width: 56%;margin:-25px auto;" src="img/to_mall.png">

</body>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById('preload').remove();
    }

    $('#join').on('click', function() {
        $('#cover,#choose_pet').show();
    });

    $('#cover').on('click',function(){
      $('#cover,#choose_pet').hide();
      }).on('touchmove',function(e){
      e.preventDefault();
    })

    $('.pet').on('click', function() {
        $(this).addClass('focus').siblings().removeClass('focus');
        location.href="./goods_list.html?pet="+$('.focus').attr('pet')+"";
    });

</script>

</html>
